<template>
 <div id="Profile">
   <list @itemClick="itemClick" />
  
   <div class="main-body">
    <head-list />
    <keep-alive>
      <router-view />
    </keep-alive>
    <!-- <netRequest /> -->
    <!-- <animation /> -->
    
    <!-- <grid v-show="currentIndex===1" />
    <label-box v-show="currentIndex===2" />
    <input-box @keyup.enter="inputChange" v-show="currentIndex===3"/> -->
    

    <!-- 可以传递参数改变按钮的颜色和形状 比如color="yellow" shape="round" -->
    <!-- <btn-input color="blue" 
               shape="round-rect"
               size="big"
               v-show="currentIndex===4">按钮</btn-input> -->
   </div>
 </div>
</template>

<script>
import List from './childComps/List'
import HeadList from './childComps/HeadList'
import Grid from './childComps/Grid'
import BtnInput from './childComps/BtnInput'
import InputBox from './childComps/InputBox'
import LabelBox from './childComps/LabelBox'
import Animation from './childComps/Animation'
import NetRequest from './childComps/NetRequest'


 export default {
   name:'Profile',
   components:{
     Grid,
     HeadList,
     List,
     BtnInput,
     LabelBox,
     InputBox,
     Animation,
     NetRequest
   },
   data(){
     return{
       currentIndex:1
     }
   },
   mounted() {
     if(location.pathname === 'tab1'){
       this.currentIndex = 1
     }else if(location.pathname === 'tab2'){
       this.currentIndex = 2
     }
   },

  methods:{
    itemClick(index){
      
      if(index === 1){
        this.$router.push({path:'/profile/tab1'})
      } else if(index === 2){
        this.$router.push({path:'/profile/tab2'})
      }
      this.currentIndex = index
    }
     
  }

   
   
   
 }
</script>

<style scoped>
:root{
  --light-color:1890FF;
}
#Profile{
  display: flex;
}
.main-body{
  width: 100vw;
}
</style>
